<template>
  <div class="home-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1 class="welcome-title">
            <span class="greeting">{{ greeting }}</span>
            <span class="username">{{ userInfo?.Username || "用户" }}</span>
            <span class="role">{{
              userInfo?.Role === 1 ? "用户" : "管理员"
            }}</span>
          </h1>
          <p class="welcome-subtitle">欢迎使用在线考试管理系统</p>
        </div>
        <div class="welcome-illustration">
          <el-icon class="welcome-icon" :size="80">
            <Sunny />
          </el-icon>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="6"
          v-for="stat in stats"
          :key="stat.title"
        >
          <div class="stat-card" :style="{ background: stat.gradient }">
            <div class="stat-icon">
              <el-icon :size="32">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 功能模块 -->
    <div class="modules-section">
      <h2 class="section-title">
        <el-icon class="title-icon">
          <Grid />
        </el-icon>
        功能模块
      </h2>
      <el-row :gutter="24">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="card in cards"
          :key="card.title"
        >
          <div class="module-card" @click="handleCardClick(card.route)">
            <div class="card-header">
              <div
                class="card-icon-wrapper"
                :style="{ background: card.gradient }"
              >
                <el-icon class="card-icon" :size="28">
                  <component :is="card.icon" />
                </el-icon>
              </div>
              <h3 class="card-title">{{ card.title }}</h3>
              <div class="card-badge" v-if="card.badge">{{ card.badge }}</div>
            </div>
            <div class="card-body">
              <p class="card-description">{{ card.description }}</p>
            </div>
            <div class="card-footer">
              <span class="card-action">立即使用</span>
              <el-icon class="arrow-icon">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions-section">
      <h2 class="section-title">
        <el-icon class="title-icon">
          <Lightning />
        </el-icon>
        快速操作
      </h2>
      <div class="quick-actions">
        <el-button
          v-for="action in quickActions"
          :key="action.title"
          :type="action.type"
          :icon="action.icon"
          size="large"
          class="quick-action-btn"
          @click="handleQuickAction(action.action)"
        >
          {{ action.title }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  Reading,
  Document,
  Collection,
  Edit,
  User,
  Sunny,
  Grid,
  ArrowRight,
  Lightning,
  Plus,
  Search,
  Setting,
} from "@element-plus/icons-vue";
import { useUserStore } from "../store";

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

const router = useRouter();

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return "夜深了，";
  if (hour < 9) return "早上好，";
  if (hour < 12) return "上午好，";
  if (hour < 14) return "中午好，";
  if (hour < 18) return "下午好，";
  if (hour < 22) return "晚上好，";
  return "夜深了，";
});

// 统计数据
const stats = ref([
  {
    title: "题库题目",
    value: "1,234",
    icon: "Edit",
    gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
  },
  {
    title: "总试卷数",
    value: "34",
    icon: "Edit",
    gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
  },
  {
    title: "进行中考试",
    value: "3",
    icon: "Document",
    gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
  },
  {
    title: "总课程数",
    value: "12",
    icon: "Reading",
    gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
  },
  {
    title: "课程学习人数",
    value: "256",
    icon: "User",
    gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
  },
]);

// 功能卡片数据
const cards = ref([
  {
    title: "题库管理",
    description: "管理试题库、添加和编辑试题，支持多种题型",
    icon: "Edit",
    route: "/question",
    gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
  },
  {
    title: "试卷管理",
    description: "创建和管理试卷、试题，支持试卷模板和批量操作",
    icon: "Collection",
    route: "/paper",
    gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
  },
  {
    title: "考试管理",
    description: "创建和管理考试、查看考试结果，支持多种考试模式",
    icon: "Document",
    route: "/exam",
    gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    badge: "推荐",
  },
  {
    title: "课程管理",
    description: "管理课程信息、章节内容，支持课程创建、编辑和删除",
    icon: "Reading",
    route: "/course",
    gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    badge: "热门",
  },
  {
    title: "用户管理",
    description: "管理系统用户、分配角色权限，支持用户导入导出",
    icon: "User",
    route: "/user",
    gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
    show: userInfo.value?.Role === 0,
  },
  {
    title: "系统设置",
    description: "配置系统参数、管理权限设置，个性化定制",
    icon: "Setting",
    route: "/settings",
    gradient: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
  },
]);

// 快速操作
const quickActions = ref([
  {
    title: "创建考试",
    icon: Plus,
    type: "primary",
    action: () => router.push("/exam/add"),
  },
  {
    title: "添加题目",
    icon: Edit,
    type: "success",
    action: () => router.push("/question/add"),
  },
  {
    title: "查看统计",
    icon: Search,
    type: "info",
    action: () => router.push("/statistics"),
  },
]);

// 处理卡片点击
const handleCardClick = (route) => {
  router.push(route);
};

// 处理快速操作
const handleQuickAction = (action) => {
  action();
};

onMounted(() => {
  // 可以在这里获取真实的用户信息和统计数据
});
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  padding: 20px;
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #00f2fe 100%);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.greeting {
  opacity: 0.9;
}

.username {
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.role {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 1rem;
  margin-left: 10px;
}

.welcome-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

.welcome-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-icon {
  color: rgba(255, 255, 255, 0.8);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.stat-card {
  border-radius: 16px;
  padding: 10px 20px 10px 50px;
  color: white;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  margin-right: 16px;
  opacity: 0.9;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
}

.stat-title {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 功能模块 */
.modules-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 30px;
}

.title-icon {
  margin-right: 12px;
  color: #667eea;
}

.module-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.module-card:hover::before {
  transform: scaleX(1);
}

.card-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.card-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-badge {
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.card-body {
  margin-bottom: 20px;
}

.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 20px 0 20px;
}

.card-description {
  color: #7f8c8d;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #ecf0f1;
}

.card-action {
  color: #667eea;
  font-weight: 600;
  font-size: 0.9rem;
}

.arrow-icon {
  color: #667eea;
  transition: transform 0.3s ease;
}

.module-card:hover .arrow-icon {
  transform: translateX(5px);
}

/* 快速操作 */
.quick-actions-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.quick-action-btn {
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
  }

  .welcome-title {
    font-size: 2rem;
    flex-direction: column;
    gap: 5px;
  }

  .welcome-illustration {
    margin-top: 20px;
  }

  .quick-actions {
    justify-content: center;
  }

  .module-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .home-container {
    padding: 10px;
  }

  .welcome-banner {
    padding: 20px;
  }

  .welcome-title {
    font-size: 1.5rem;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-number {
    font-size: 1.5rem;
  }
}
</style>
